<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="js/e.js"></script>
    <script type="text/javascript">
    	window.onload = function(){
			size=document.body.clientWidth/30;
			document.getElementsByTagName("html")[0].style.fontSize = size+"px";
			
			var canvas = document.getElementById("canvas");
			canvas.width = document.body.clientWidth;
			canvas.height = document.body.clientHeight;
			
			var snow_x = new Array();
			var snow_y = new Array();
			var fontSizes = new Array();
			for(var i = 0 ; i < 100 ; i++){
				snow_x[i] = Math.random()*canvas.width;
				snow_y[i] = -1*Math.random()*canvas.height;
				fontSizes[i] = Math.random()*30+2;
			}
			
			//获取context2d
			var context = canvas.getContext("2d");
			context.fillStyle = "#FFFFFF";
			//setInterval可以定时执行操作
			var speedy = 10;
			var speedx = 5;
			setInterval(function(){
				context.clearRect(0,0,canvas.width,canvas.height);
				for(var i = 0 ; i < 100 ; i++){
					snow_y[i] = snow_y[i] + speedy ;
					if(snow_y[i]>canvas.height){
						snow_y[i] = -1*Math.random()*canvas.height;
					} 
					context.font = fontSizes[i]+"px arial";
					context.fillText("#*",snow_x[i],snow_y[i]);
				}
			},50);
			
			//添加事件
			var dl = document.getElementById("denglong");
			
			var player = document.getElementById("player");
			dl.addEventListener("touchstart",function(){
				if(player.paused){
					player.play();
				}else{
					player.pause();
				}
			},false);
    	}
    </script>
    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    		border: none;
    	}
    	html,body{
    		width: 100%;
    		height: 100%;
    	}
    	#beijing{
    		width: 100%;
    		height: 100%;
    		background:url(img/pic_5tu_big_201611152113285195_0001s_0011_图层-57.png);
 
    		background-size: contain;
    	}
    	.p_hailang{
    		position: absolute;
    	    right: 0rem;
    	    left: 0rem;
    		bottom: -6.5rem;
    		width: 100%;
    		height: 45rem;
    		background:url(img/pic_5tu_hailang.png);
    		background-size: contain;
    	}
    	.p_meihua{
    		position: absolute;
    		right:-0.5rem;
    		top: 1rem;
    		width: 19rem;
    		height: 15rem;
    		background:url(img/hy_0000s_0008_图层-1.png);
    		background-size: contain;
    	}
    	.p_denglong{
    		position: absolute;
    		left: 0rem;
    		top: -5rem;
    		width: 51rem;
    		height: 72rem;
    		background:url(img/pic_5tu_big_201611152113285195_0001s_0006_图层-4-副本.png);
    		background-size: contain;
    		animation: ha 3s linear infinite;
    		-webkit-animation: ha 3s linear infinite;
    	}
    	@-webkit-keyframes ha{
    		from{transform: scale(1);}
    		to{transform: scale(0.9);}
    	}
    	@keyframes ha{
    		from{transform: scale(1);}
    		to{transform: scale(0.9);}
    	}
    	.p_wanshiruyi{
    		position: absolute;
    		right: -1rem;
    		top: 10rem;
    		width:8.2rem;
    		height: 10.79227053140096rem;
    		background: url(img/pic_5tu_big_201611152113285195_0000s_0000s_0001_万事如意.png);
    		background-size: contain;
    	}
    	.p_jjbx{
    		position: absolute;
    		top: 25rem;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		margin: auto;
    		width:22rem;
    		height: 8rem;
    		background:url(img/pic_5tu_金鸡报喜.png);
    		background-size: contain;
    	}
    	.p_yinzhang{
    		position: absolute;
    		left: 0rem;
    	    bottom: 8rem;
    		width:5.2rem;
    		height: 6.79227053140096rem;
    		background: url(img/pic_5tu_big_201611152113285195_0000s_0000s_0000_印章.png);
    		background-size: contain;
    	}
    	.p_zhuti{
    		position: absolute;
    		top: -6rem;
    		left: -5rem;
    		right: 0rem;
    		bottom: 0;
    		margin: auto;
    		width: 15rem;
    		height: 18rem;
    		background:url(img/pic_5tu_big_201611152113285195_0000s_0000_主题字.png);
    		background-size: contain;
    		animation: ja 3s linear infinite;
    		-webkit-animation: ja 3s linear infinite;
    	}
    	@-webkit-keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    	@keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    	<style>
    	canvas{ 
	background-color:#000000;
	z-index:9999;
	}
</style>
</head>
<body>
	<audio id="player" src="static/牧羊曲-纯音乐-274655.mp3" autoplay="autoplay" loop="loop"></audio>
	<div id="beijing">
		<canvas id="canvas"></canvas>
		<div class="p_hailang">	</div>
		<div class="p_meihua">	</div>
		<div id="denglong" class="p_denglong"></div>
		<div class="p_wanshiruyi"></div>
		<div class="p_jjbx"></div>
		<div  id="yinzhang" class="p_yinzhang"></div>
		<a href="s.html"><div class="p_zhuti"></div></a>
	</div>
</body>
</html>